<template>
  <div class="calendar-comp-box">
    <div class="calendar-box">
      <div class="week-title-box">
        <div class="week-title" v-for="item,index in weekArr" :key="index">{{item}}</div>
      </div>
      <div class="day-box">
        <div class="week-list" v-for="weekList,weekIndex in dateArr" :key="weekIndex">
          <div class="day" v-for="dayItem,dayIndex in  weekList" :key="dayIndex">
            <template v-if="canShowPopover(dayItem)">
              <van-popover
                class="popover-box"
                v-model="dayItem.showPopover"
                trigger="click"
                theme="dark"
                placement="top"
                @open="clickDay(dayItem,dayIndex,weekIndex)"
              >
                <div class="pop-box">
                  <div class="sign-tip">
                    <span
                      class="pop-spot"
                      :class="dayItem?.value?.clockIn===1?'pop-spot_normal':'pop-spot_warn'"
                    ></span>
                    打卡：{{dayItem?.value?.clockIn===1?'正常':'异常'}}
                  </div>
                  <div class="visits-tip" v-if="dayItem?.value?.visits>0">
                    <span class="pop-spot pop-spot_sign"></span>
                    访量：{{dayItem?.value?.visits}}
                  </div>
                </div>
                <template #reference>
                  <div
                    class="day-item"
                    :class="handleDayClass(dayItem,dayIndex,weekIndex)"
                  >{{dayItem.date|dateFiler}}</div>
                  <div class="spot-box" v-if="dayItem.status.isCurr && !dayItem.status.isWeekend">
                    <div v-if="dayItem?.value?.clockIn===0" class="spot spot_warn"></div>
                    <div v-if="dayItem?.value?.clockIn===1" class="spot spot_normal"></div>
                    <div v-if="dayItem?.value?.visits>0" class="spot spot_sign"></div>
                  </div>
                </template>
              </van-popover>
            </template>
            <template v-else>
              <div
                class="day-item"
                :class="handleDayClass(dayItem,dayIndex,weekIndex)"
                @click="clickDay(dayItem,dayIndex,weekIndex)"
              >{{dayItem.date|dateFiler}}</div>
              <div class="spot-box" v-if="dayItem.status.isCurr && !dayItem.status.isWeekend">
                <div v-if="dayItem?.value?.clockIn===0" class="spot spot_warn"></div>
                <div v-if="dayItem?.value?.clockIn===1" class="spot spot_normal"></div>
                <div v-if="dayItem?.value?.visits>0" class="spot spot_sign"></div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
var isSameOrBefore = require('dayjs/plugin/isSameOrBefore')
dayjs.extend(isSameOrBefore)
export default {
  data() {
    return {
      currDate: new Date(),
      clickDayIndex: -1,
      clickWeekIndex: -1,
      weekArr: ['日', '一', '二', '三', '四', '五', '六']
    }
  },
  props: {
    dateArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    canShowPopover() {
      return item => {
        return (
          item?.status?.isCurr &&
          !item?.status?.isWeekend &&
          [0, 1].includes(item?.value?.clockIn)
        )
      }
    }
  },
  methods: {
    clickDay(item, dayIndex, weekIndex) {
      if (item.status.isCurr && !item.status.isWeekend) {
        this.clickDayIndex = dayIndex
        this.clickWeekIndex = weekIndex
        console.log('clickDay', item)
      }
    },
    handleDayClass(item, dayIndex, weekIndex) {
      let classStr = `${
        item.status.isWeekend || item.status.isNext || item.status.isPrev
          ? ' day_prev_next_weekend'
          : ''
      }${
        dayjs(item.date).isSame(dayjs(this.currDate), 'day') ? ' day_curr' : ''
      }${
        dayIndex === this.clickDayIndex && weekIndex === this.clickWeekIndex
          ? ' day_active'
          : ''
      }`
      return classStr
    }
  },
  filters: {
    dateFiler(date) {
      return new Date(date).getDate()
    }
  }
}
</script>
<style lang="scss" scoped>
.calendar-comp-box {
  padding: 35px 47px 72px;
  background-color: #fff;
  border-radius: 40px;
  .selcet-date-box {
    font-size: 40px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #17204d;
    line-height: 58px;
  }
  .calendar-box {
    .week-title-box {
      margin-top: 43px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      .week-title {
        text-align: center;
        flex-shrink: 1;
        width: 62px;
        height: 62px;
        // width: calc(100% / 7);
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #d0d2db;
        line-height: 40px;
      }
    }
    .day-box {
      .week-list {
        margin-top: 35px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        .day {
          text-align: center;
          flex-shrink: 1;
          // width: 62px;
          // height: 62px;
          // width: calc(100% / 7);
          font-size: 34px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #17204d;
          line-height: 40px;
          .day-item {
            width: 62px;
            height: 62px;
            line-height: 62px;
            border-radius: 50%;
          }
          .day_default {
          }
          .day_curr {
            background-color: #dadffd;
            color: #4761f3;
          }
          .day_active {
            background-color: #4761f3;
            color: #ffffff;
          }
          .day_prev_next_weekend {
            color: #d0d2db;
          }
          .spot-box {
            margin-top: 5px;
            height: 8px;
            display: flex;
            justify-content: center;
            .spot {
              border-radius: 50%;
              width: 8px;
              height: 100%;
              margin-left: 2px;
              &_warn {
                background-color: #fd893c;
              }
              &_normal {
                background-color: #4761f3;
              }
              &_sign {
                background-color: #64d1ac;
              }
            }
          }
        }
      }
    }
  }
}
.pop-box {
  padding: 10px 16px;
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 34px;
  .sign-tip {
  }
  .visits-tip {
  }
  .pop-spot {
    margin-bottom: 2px;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .pop-spot_normal {
    background-color: #4761f3;
  }
  .pop-spot_warn {
    background-color: #fd893c;
  }
  .pop-spot_sign {
    background-color: #64d1ac;
  }
}
</style>